<template>
  <div class="map-div">
    <!-- 地图渲染DOM -->
    <div class="div-tuceng_box">
      <button @click="addSituation">态势图层</button>
      <button @click="addCircleByPoints">点生圆功能</button>
      <button @click="removeSituation">清除态势图层</button>
      <button @click="removeCircle">清除圆图层</button>
      <button @click="clear">清除</button>
    </div>

    <div id="map-ol"></div>
  </div>
</template>

<script>
import MapObject from "./js/map";
import * as turf from "@turf/turf";
import MapUtils from "./js/mapUtil/MapUtils";

export default {
  name: "SituationMap",
  data() {
    return {
      mapObject: null, // 地图引擎加载对象
      mapTypeName: "GDM", // 地图引擎默认加载底图。可选择值：GDM、TSM、TSLM、Google、OMS（默认）
      layerSelectShow: true, // 是否开启底图选择器。true 显示比例尺；flase 不显示比例尺
      mapConfig: {
        // 地图属性配置
        mouseMove: true, // 开始鼠标移动事件
        mapMoved: true, // 地图移动完成事件
        mouseDraw: true, // 鼠标绘制
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.initMap(); // 初始化地图引擎
    }, 1)
  },
  destroyed() {
    this.mapObject = null;
  },
  methods: {
    // 初始化地图引擎
    initMap() {
      // 初始化地图引擎。(DOM ID，初始中心点坐标数组, 初始层级, 初始底图, 其他配置对象)
      this.mapObject = new MapObject(
        "map-ol",
        [103.403694, 36.924896],
        5,
        this.mapTypeName,
        {
          scale: true, // 开启比例尺
          ...this.mapConfig,
        }
      );
    },
    clear() {
      MapUtils.removeAllLayer()
    },
    //加载态势图层
    addSituation() {
      let pointArr = this.initSituationPointData()
      let areaArr = this.initSituationAreaData()
      MapUtils.addSituationLayer(pointArr, areaArr)
      //后面加个true可以在加载完成后定位到图层
      // MapUtils.addSituationLayer(pointArr, areaArr,true)
    },
    //初始化态势点数据
    initSituationPointData() {
      let pointData = []
      let imgArr = [
        require("./icon/points/fighter.png"),
        require("./icon/points/ship.png"),
        require("./icon/points/tank.png"),
      ]
      for (let i = 0; i < 50; i++) {
        //随机一个经纬度坐标，保留6位小数
        let point = turf.randomPosition([121, 22, 82, 45])
        pointData.push({
          id: i,
          longitude: point[0],
          latitude: point[1],
          imgIcon: imgArr[Math.floor(Math.random() * 3)]//把想显示的图片绑定到单个
        })
      }
      return pointData
    },
    //初始化态势区域数据
    initSituationAreaData() {
      //坐标必须是这种数组包经纬度
      //有几个面就push几组对象
      let areaPolygon1 = [[102.316742, 38.587271, 796], [98.935999, 37.040474, 2843.2], [99.207002, 35.632492, 1036.9], [99.658613, 33.802107, 3707.7], [100.307519, 31.828891, 1987.7], [101.242499, 30.534324, 3515.5], [102.589729, 28.913023, 1412.8], [104.474813, 27.500052, 219], [106.131667, 26.767752, 653.4], [108.405268, 26.456753, 388.9], [112.146324, 26.270433, -515.3], [115.140873, 26.850162, 18.3], [117.935175, 27.730214, 208], [119.73251, 28.639534, 310.8], [121.685257, 30.327494, 2139.7], [122.36356, 32.359232, 2436.3], [122.53384, 33.954203, -391.1], [122.730901, 36.060292, 1329.4], [122.156917, 38.102171, 1056.2], [122.065524, 38.77816, -642.8], [121.517889, 39.757678, 842], [114.724448, 41.18179, 312.3], [107.642246, 39.353426, 1006.1]]
      let areaPolygon2 = [[93.60136, 48.827007, 789.5], [96.062757, 47.190733, 1030.7], [98.176764, 45.013492, 1836.9], [100.112474, 43.311977, 840.7], [103.001627, 42.3953, 751.2], [105.047025, 41.810865, 519.3], [107.52262, 41.400958, 245.1], [110.203801, 41.398484, 612.7], [113.499584, 42.464692, 915.6], [116.118763, 44.180126, 179.7], [119.171715, 51.271709, 100.5], [117.113341, 52.95524, 7167.4], [114.931268, 55.125572, 20057.6], [110.435039, 57.84248, 7756.3], [102.012957, 57.775908, 112.5], [95.344655, 56.486874, 2929.5], [90.228898, 53.859672, 138.5]]
      let areaData = []
      let areaObject1 = {
        id: 1,
        points: areaPolygon1,
        fillColor: 'rgba(255, 0, 0, 0.5)',//面填充颜色
        outLineColor: 'rgb(0,0,0)',//面边框颜色
        outLineWidth: 2,//面边框宽度
        isDash: true,//是否虚线
        dashArr: [15, 5],//虚线样式，15代表线段长度，5代表线段间隔
      }
      let areaObject2 = {
        id: 2,
        points: areaPolygon2,
        fillColor: 'rgba(10,224,35,0.5)',//面填充颜色
        outLineColor: 'rgb(6,23,192)',//面边框颜色
        outLineWidth: 2,//面边框宽度
      }
      areaData.push(areaObject1)
      areaData.push(areaObject2)
      return areaData
    },
    //根据点坐标添加圆
    addCircleByPoints() {
      let pointArr = []
      for (let i = 0; i < 5; i++) {
        let point = turf.randomPosition([115.195463, 40.807805, 117.506543, 39.085125])
        pointArr.push({
          longitude: point[0],
          latitude: point[1],
          radius: Math.random() * 100000,//半径 单位：米
          fillColor: 'rgba(93,95,93,0.5)',//面填充颜色
          outLineColor: 'rgb(242,242,0)',//面边框颜色
          outLineWidth: 2,//面边框宽度
          isDash: true,//是否虚线
          dashArr: [15, 5],//虚线样式，15代表线段长度，5代表线段间隔
        })
      }
      //第一个参数是点集合，第二个参数是isFlyTo,是否定位到图层，默认false
      MapUtils.addCircleByPoints(pointArr, true)
    },
    removeSituation(){
      MapUtils.removeSituationLayer()
    },
    removeCircle(){
      MapUtils.removeCircleLayer()
    },
  },
}
</script>

<style scoped>
.map-div,
#map-ol {
  height: 100%;
  width: 100%;
  background-color: #a4cdff;
  position: relative;
}

.div-tuceng_box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
}

.div-tuceng_box button {
  padding: 5px;
  cursor: pointer;
  margin-left: 5px;
}
</style>
